import { Link } from "react-router-dom"
import { useSelector, useDispatch} from "react-redux"
import * as Types from '../Login/store/actionTypes'

const Navbar = () => {
  const state = useSelector(state => state.login)
  const { isAuth, user } = state
  const dispatch = useDispatch()
  const logout  = () => {
    localStorage.removeItem('@TOKEN')
    dispatch({
      type: Types.SYNC_STATE_INFO,
      payload: {}
    })
  }
  return (
    <div>

      <nav className="navbar navbar-expand-lg navbar-light bg-light">
        <Link to='/home' className="navbar-brand" href="#">Home</Link>
        <button className="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span className="navbar-toggler-icon"></span>
        </button>

        <div className="collapse navbar-collapse" id="navbarSupportedContent">
          {
            isAuth
              ?
              <ul className="navbar-nav mr-auto">
                <li className="nav-item active">
                  <Link to='/Personal' className="nav-link" href="#">Personal center <span className="sr-only">(current)</span></Link>
                </li>
                <li className="nav-item">
                  <a href='/' className="nav-link" onClick={logout}>Logout</a>
                </li>
              </ul>
              :
              <ul className="navbar-nav mr-auto">
                <li className="nav-item active">
                  <Link to='/register' className="nav-link" href="#">sign up <span className="sr-only">(current)</span></Link>
                </li>
                <li className="nav-item">
                  <Link to='/login' className="nav-link" href="#">login</Link>
                </li>
              </ul>
          }
          <Link to='/antd' className="navbar-brand" href="#">antd</Link>
          <Link to='/websoc' className="navbar-brand" href="#">websoc</Link>

        </div>
      </nav>
    </div>
  )
}
export default Navbar